<template>
  <ul class="app-header-nav">
    <li class="home"><RouterLink to="/">首页</RouterLink></li>
  <li v-for="item in $store.state.category.list" :key="item.name">
      <RouterLink
        active-class="active"
        v-if="item.id"
        :to="`/category/${item.id}`"
      >
    {{item.name}}
     </RouterLink>
    <a v-else href="javascript:;">{{item.name}} </a>
  </li>

  </ul>
</template>

<script>
// 1.渲染nav中的一级分类
// 2.在API层，定义接口函数
export default {
  name: "app-header-nav",
};
</script>

<style scoped lang="less">
.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;
  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;
    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;
            // 当a链接上有active的时候会有激活样式
      &.active {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
    &:hover {
      a {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
  }
}
</style>